<ion-header class="bp-header">
  <ion-navbar>
    <ion-title>
      <div [reveal-at-scroll-pos]="expandableHeader.headerHeight" [scrollArea]="scrollArea">
        {{ 'Settings' | translate }}
      </div>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content #scrollArea>
  <div class="wrapper">
    <expandable-header [scrollArea]="scrollArea" [fadeFactor]="5" [disableFade]="true" #expandableHeader>
      <ion-toolbar class="wide-header__title">
        <expandable-header-primary>
          {{ 'Settings' | translate }}
        </expandable-header-primary>
      </ion-toolbar>
    </expandable-header>

    <ion-list class="bp-list">

      <ng-container *ngIf="isCordova && !isCopay">
        <button ion-item (click)="openBitPayIdPage()">

          <ion-icon *ngIf="!bitPayIdUserInfo" class="item-img icon-login" item-start>
            <img src="assets/img/bitpay-card/icon-bitpay-user.svg" width="60">
          </ion-icon>
          <ion-icon *ngIf="bitPayIdUserInfo && !bitPayIdUserInfo?.givenName" class="item-img icon-login" item-start>
            <img src="assets/img/bitpay-card/icon-bitpay.svg" width="60">
          </ion-icon>
          <ion-icon *ngIf="bitPayIdUserInfo && bitPayIdUserInfo?.givenName" class="item-img icon-login" item-start>
            <span class="icon-bitpay-id">
              <span class="account-initials">{{bitPayIdUserInfo?.givenName}}</span>
              <span class="account-initials">{{bitPayIdUserInfo?.familyName}}</span>
            </span>
          </ion-icon>

          <ion-label>
            <span class="main-label">
              <span *ngIf="!bitPayIdUserInfo" translate>Log in or Sign Up</span>
              <span class="bitpay-name" *ngIf="bitPayIdUserInfo && !bitPayIdUserInfo?.givenName">
                <span translate>BitPay Account</span>
                <div class="bitpay-email">{{ bitPayIdUserInfo?.email }}</div>
              </span>
              <span class="bitpay-name" *ngIf="bitPayIdUserInfo && bitPayIdUserInfo?.givenName">
                {{ bitPayIdUserInfo?.givenName }} {{ bitPayIdUserInfo?.familyName }}
                <div class="bitpay-email">{{ bitPayIdUserInfo?.email }}</div>
              </span>
            </span>
          </ion-label>
        </button>
      </ng-container>

      <ion-item-divider tappable (click)="mdesFlag()"> {{ 'General' | translate }} </ion-item-divider>

      <button ion-item (click)="openWhatsNew()" *ngIf="featureList && featureList.features.length > 0">
        <ion-icon class="item-img icon-settings" item-start>
          <img src="assets/img/settings-icons/icon-info.svg" />
        </ion-icon>
        <ion-label>
          <span class="main-label" translate>What's new</span>
        </ion-label>
        <ion-note item-end>
          {{appVersion}}
        </ion-note>
      </button>
      
      <button ion-item (click)="openThemePage()">
        <ion-icon class="item-img icon-settings ionic-icon" name="ios-color-palette" item-start></ion-icon>
        <ion-label>
          <div class="main-label">{{ 'Theme' | translate }}</div>
        </ion-label>
        <ion-note *ngIf="appTheme" item-end>
          {{ appTheme }}
        </ion-note>
      </button>

      <button ion-item (click)="openNavigationPage()" *ngIf="isCordova">
        <ion-icon class="item-img icon-settings" item-start>
          <img src="assets/img/settings-icons/icon-hand.svg" />
        </ion-icon><ion-label>
          <div class="main-label">{{ 'Navigation' | translate }}</div>
        </ion-label>
        <ion-note *ngIf="navigation" item-end>
          {{ navigation }}
        </ion-note>
      </button>

      <button ion-item (click)="openAltCurrencyPage()">
        <ion-icon class="item-img icon-settings" item-start>
          <img src="assets/img/settings-icons/icon-currency.svg" />
        </ion-icon>
        <ion-label>
          <div class="main-label">{{ 'Display Currency' | translate }}</div>
        </ion-label>
        <ion-note *ngIf="selectedAlternative" item-end>
          {{ selectedAlternative.name }}
        </ion-note>
      </button>

      <button ion-item (click)="openLanguagePage()">
        <ion-icon class="item-img icon-settings" item-start>
          <img src="assets/img/settings-icons/icon-language.svg" />
        </ion-icon>
        <ion-label>
          <span class="main-label" translate>Language</span>
        </ion-label>
        <ion-note *ngIf="currentLanguageName" item-end>
          {{ currentLanguageName }}
        </ion-note>
      </button>

      <button ion-item *ngIf="isCordova" (click)="openLockPage()">
        <ion-icon class="item-img icon-settings" item-start>
          <img src="assets/img/settings-icons/icon-lock.svg" />
        </ion-icon>
        <ion-label>
          <div class="main-label">{{ 'Lock App' | translate }}</div>
        </ion-label>
        <ion-note *ngIf="lockMethod === 'disabled'" item-end>
          {{ 'Disabled' | translate }}
        </ion-note>
        <ion-note *ngIf="lockMethod === 'pin'" item-end>
          {{ 'PIN' | translate }}
        </ion-note>
        <ion-note *ngIf="lockMethod === 'fingerprint'" item-end>
          {{ 'Biometric' | translate }}
        </ion-note>
      </button>

      <button ion-item (click)="openNotificationsPage()">
        <ion-icon class="item-img icon-settings" item-start>
          <img src="assets/img/settings-icons/icon-notifications.svg" />
        </ion-icon>
        <span class="main-label" translate>Notifications</span>
      </button>

      <ion-item class="align-with-button">
        <ion-icon class="item-img icon-settings ionic-icon" name="md-eye" item-start></ion-icon>
        <ion-label>
          <div class="main-label">
            {{'Show Portfolio Value' | translate}}
          </div>
        </ion-label>
        <ion-toggle [(ngModel)]="showTotalBalance" (ionChange)="toggleShowBalanceFlag()"></ion-toggle>
      </ion-item>

      <ion-item-divider *ngIf="walletsGroups && walletsGroups[0]">
        {{ 'Crypto Wallets & Keys' | translate }}
        <button class="reorder-option" ion-button item-end clear *ngIf="!showReorder && walletsGroups?.length > 1" (click)="reorder()">
          <img src="assets/img/sort.svg">
        </button>
        <button class="reorder-option" ion-button item-end clear *ngIf="showReorder" (click)="reorder()">
          {{'Done' | translate}}
        </button>
      </ion-item-divider>

      <button ion-item (click)="openAddressBookPage()">
        <ion-icon class="item-img icon-settings" item-start>
          <img src="assets/img/settings-icons/icon-address-book.svg" />
        </ion-icon>
        <span class="main-label" translate>Address Book</span>
      </button>
      
      <ion-item class="align-with-button">
        <ion-icon class="item-img icon-settings icon-qrcode" style="opacity: 0.3;" item-start>
          <img src="assets/img/settings-icons/icon-qrcode.svg">
        </ion-icon>
        <ion-label>
          <div class="main-label">
            {{'Use Basic QR Code' | translate}}
          </div>
        </ion-label>
        <ion-toggle [(ngModel)]="useLegacyQrCode" (ionChange)="toggleQrCodeLegacyFlag()"></ion-toggle>
      </ion-item>

      <ion-list reorder="{{showReorder}}" (ionItemReorder)="reorderAccounts($event)">
        <button ion-item [attr.detail-none]="showReorder ? true : null" *ngFor="let walletsGroup of walletsGroups; let i = index" (click)="openWalletGroupSettings(walletsGroup[0].keyId)">
          <ion-icon class="item-img icon-settings" item-start>
            <img src="assets/img/settings-icons/icon-key.svg" />
          </ion-icon>
          <ion-label>
            <div class="main-label">
              <span>{{profileProvider.getWalletGroup(walletsGroup[0].keyId).name}}</span>
            </div>
          </ion-label>
          <ion-note *ngIf="walletsGroup.length == 1" item-end>
            {{'{walletsGroupLength} Wallet' | translate:{walletsGroupLength: walletsGroup.length} }}
          </ion-note>
          <ion-note *ngIf="walletsGroup.length > 1" item-end>
            {{'{walletsGroupLength} Wallets' | translate:{walletsGroupLength: walletsGroup.length} }}
          </ion-note>
        </button>
      </ion-list>

      <button ion-item (click)="openWalletGroupSettings(readOnlyWalletsGroup[0].keyId)" *ngIf="readOnlyWalletsGroup && readOnlyWalletsGroup.length > 0">
        <ion-icon class="item-img icon-settings" item-start>
          <img src="assets/img/settings-icons/icon-read-only.svg" width="26" />
        </ion-icon>
        <ion-label>
          <div class="main-label" translate>
            Read Only
          </div>
        </ion-label>
        <ion-note *ngIf="readOnlyWalletsGroup.length == 1" item-end>
          {{'{walletsGroupLength} Wallet' | translate:{walletsGroupLength: readOnlyWalletsGroup.length} }}
        </ion-note>
        <ion-note *ngIf="readOnlyWalletsGroup.length > 1" item-end>
          {{'{walletsGroupLength} Wallets' | translate:{walletsGroupLength: readOnlyWalletsGroup.length} }}
        </ion-note>
      </button>

      <button ion-item detail-none class="create-button" *ngIf="walletsGroups && walletsGroups[0]" (click)="goToAddView()">
        {{ 'Create or Import a Key' | translate }}
      </button>

      <ion-item-divider *ngIf="cardServices && cardServices[0]">
        {{ 'Cards' | translate }}
      </ion-item-divider>

      <div *ngIf="isCordova && !isCopay && showBitPayCard && bitpayCardItems?.length">
        <ion-list>
          <ng-container *ngFor="let card of bitpayCardItems; let i = index; trackBy: trackBy">
            <button ion-item (click)="openCardSettings(card.id)" @fade *ngIf="!card.hide">
              <ion-icon class="item-img" item-start>
                <img src="assets/img/bitpay-card/bitpay-card-icon-list.svg" />
              </ion-icon>
              <div class="main-label">BitPay {{card.brand === 'Mastercard'? 'Mastercard&reg;' : 'Visa&reg; Card'}} ({{card.lastFourDigits}})</div>
              <ion-note item-end *ngIf="card.cardType === 'virtual'">
                <span translate>Virtual</span>
              </ion-note>
            </button>
          </ng-container>
        </ion-list>
      </div>

      <button ion-item *ngFor="let card of (cardServices | orderBy: ['title'])" (click)="openSettingIntegration(card.name)">
        <ion-icon class="item-img" item-start>
          <img src="{{card.icon}}" />
        </ion-icon>
        <span class="main-label">{{ card.title }}</span>
        <ion-note item-end *ngIf="card.linked">
          <span *ngIf="card.linked" translate>Linked</span>
          <span *ngIf="!card.linked">
            {{ card.show ? ('On' | translate) : ('Off' | translate) }}
          </span>
        </ion-note>
      </button>

      <ion-item-divider *ngIf="integrationServices && integrationServices[0]">
        {{ 'Exchanges' | translate }}
      </ion-item-divider>

      <button ion-item *ngFor="let integration of (integrationServices | orderBy: ['title'])" (click)="openSettingIntegration(integration.name)">
        <ion-icon class="item-img" item-start>
          <img src="{{integration.icon}}" />
        </ion-icon>
        <span class="main-label">{{ integration.title }}</span>
        <div *ngIf="integration.linked && integration.email" class="secondary-label">{{ integration.email }}</div>
        <ion-note item-end *ngIf="integration.linked">
          <span *ngIf="integration.linked" translate>Linked</span>
          <span *ngIf="!integration.linked">
            {{ integration.show ? ('On' | translate) : ('Off' | translate) }}
          </span>
        </ion-note>
      </button>

      <ion-item-divider *ngIf="externalServices && externalServices[0]">
        {{ 'External Services' | translate }}
      </ion-item-divider>

      <button ion-item *ngFor="let externalService of (externalServices | orderBy: ['title'])" (click)="openSettingIntegration(externalService.name)">
        <ion-icon class="item-img" item-start>
          <img src="{{externalService.icon}}" />
        </ion-icon>
        <span class="main-label">{{ externalService.title }}</span>
      </button>


      <ion-item-divider tappable (click)="mdesCertOnlyFlag()">{{ 'More' | translate }}</ion-item-divider>

      <button ion-item (click)="openAdvancedPage()">
        <ion-icon class="item-img icon-settings" item-start>
          <img src="assets/img/settings-icons/icon-advanced.svg" />
        </ion-icon>
        <span class="main-label" translate>Advanced</span>
      </button>

      <button ion-item (click)="openHelpExternalLink()">
        <ion-icon class="item-img icon-settings" item-start>
          <img src="assets/img/settings-icons/icon-help-support.svg" />
        </ion-icon>
        <span class="main-label" translate>Help &amp; Support</span>
      </button>

      <button ion-item *ngIf="isCordova" (click)="openSharePage()">
        <ion-icon class="item-img icon-settings" item-start>
          <img src="assets/img/settings-icons/icon-heart.svg" />
        </ion-icon>
        <span class="main-label" translate>Share</span> {{ appName }}
      </button>

      <button ion-item (click)="openPrivacyPolicy()">
        <ion-icon class="item-img icon-settings" item-start>
          <img src="assets/img/settings-icons/icon-lock.svg" />
        </ion-icon>
        <span class="main-label" translate>Privacy Notice</span>
      </button>

      <button ion-item (click)="openTermsOfUse()">
        <ion-icon class="item-img icon-settings ionic-icon" name="md-list-box" item-start></ion-icon>
        <span class="main-label" translate>Terms of Use</span>
      </button>

      <button ion-item (click)="openAboutPage()">
        <ion-icon class="item-img icon-settings" item-start>
          <img src="assets/img/settings-icons/icon-info.svg" />
        </ion-icon>
        <span class="main-label" translate>About {{ appName }}</span>
      </button>
    </ion-list>
  </div>
</ion-content>
